import React, { Component } from 'react'
import { List, InputItem, Button, Picker } from 'antd-mobile';
import { createForm } from 'rc-form';
const Item = List.Item;

interface IState {
    roles: object[],
    test: string
}
interface IProps {
    test1: number
}
class Index extends Component<IProps, IState> {
    constructor(props) {
        super(props)
        this.state = {
            test: 1,
            roles: [
                {
                    label: '买手',
                    value: 'buyer'
                },
                {
                    label: '买家',
                    value: 'user'
                }
            ]
        }
    }
    onReset = () => {
        this.props.form.resetFields();
    }
    validateAccount = (rule, value, callback) => {
        if (value && value.length > 2) {
            callback();
        } else {
            callback(new Error('At least four characters for account'));
        }
    }

    onSubmit = () => {
        this.props.form.validateFields({ force: true }, (error) => {
            if (!error) {
                console.log(this.props.form.getFieldsValue());

            } else {
                alert('Validation failed');
            }
        });
    }
    render() {
        const { getFieldProps, getFieldError } = this.props.form;
        return (
            <form>
                <List
                    renderHeader={() => 'Register'}
                    renderFooter={() => getFieldError('account') && getFieldError('account').join(',')}
                >
                    <InputItem
                        {...getFieldProps('account', {
                            rules: [
                                { required: true, message: 'Please input account' },
                                { validator: this.validateAccount },
                            ],
                        })}
                        clear
                        error={!!getFieldError('account')}
                        onErrorClick={() => {
                            alert(getFieldError('account').join('、'));
                        }}
                        placeholder="please input account"
                    >账号</InputItem>
                    <InputItem {...getFieldProps('password')} placeholder="please input password" type="password">密码</InputItem>
                    <Picker data={this.state.roles} cols={1} {...getFieldProps('role')} className="forss">
                        <Item arrow="horizontal">选择身份</Item>
                    </Picker>
                    <Item>
                        <Button type="primary" size="small" inline onClick={this.onSubmit}>提交</Button>
                        <Button size="small" inline style={{ marginLeft: '5px' }} onClick={this.onReset}>重置</Button>
                    </Item>
                </List>
            </form>
        )
    }
}

const BasicInputWrapper = createForm()(Index);
export default BasicInputWrapper